<template>
	<view class="container">
		<!-- 侧边导航栏 -->
		<view class="sidebar">
			<view v-for="(item, index) in navItems" :key="index"
				:class="['nav-item', { active: activeIndex === index }]" @click="handleNavClick(index, item.path)">
				{{ item.name }}
			</view>
		</view>
		<view class='content'>
			<!-- 搜索和选择框 -->
			<view class="search-box">
				<picker mode="selector" :range="searchFields" @change="onSearchFieldChange">
					<view class="picker-input">{{ searchField }}</view>
				</picker>
				<input type="text" v-model="searchKey" placeholder="请输入搜索内容" class="search-input" />
				<button class="search-btn" @click="searchData">搜索</button>
			</view>
			<!-- 数据表格 -->
			<view class="data-table">
				<view class="table-row table-header">
					<view class="table-cell">处方ID</view>
					<view class="table-cell">医生ID</view>
					<view class="table-cell">病人ID</view>
					<view class="table-cell">状态</view>
					<view class="table-cell">操作</view>
				</view>
				<view v-for="(item, index) in paginatedData" :key="index" class="table-row">
					<view class="table-cell">{{ item.id  }}</view>
					<view class="table-cell">{{ item.doctorId }}</view>
					<view class="table-cell">{{ item.patientId }}</view>
					<view class="table-cell">{{item.status=="Paid"?"已付款":"已发药"}}</view>
					<view class="table-cell actions">
						<button class="view-details-btn" @click="viewDetails(item)">查看详情</button>
					</view>
				</view>
			</view>
			<!-- 分页控件 -->
			<view class="pagination">
				<button class="pagination-btn" @click="prevPage" :disabled="currentPage === 1">上一页</button>
				<view class="pagination-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</view>
				<button class="pagination-btn" @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
			</view>

			<!-- 悬浮窗 -->
			<view v-if="showModal" class="modal-overlay" @click="closeModal">
				<view class="modal" @click.stop>
					<view class="modal-header">
						<view class="modal-title">药方详情</view>
						<button class="close-btn" @click.stop="closeModal">×</button>
					</view>
					<view class="modal-body">
						<view class="meds-table">
							<!-- 表头 -->
							<view class="meds-table-row meds-table-header">
								<view class="meds-table-cell">药品ID</view>
								<view class="meds-table-cell">药品名</view>
								<view class="meds-table-cell">规格</view>
								<view class="meds-table-cell">数量</view>
								<view class="meds-table-cell">单价</view>
								<view class="meds-table-cell">小计</view>
							</view>
							<!-- 表格内容 -->
							<view class="meds-table-row" v-for="(med, medIndex) in currentMedication" :key="med.id">
								<view class="meds-table-cell">{{ med.id }}</view>
								<view class="meds-table-cell">{{ med.name }}</view>
								<view class="meds-table-cell">{{ med.specification }}</view>
								<view class="meds-table-cell">{{ med.quantities }}</view>
								<view class="meds-table-cell">{{ med.price }}</view>
								<view class="meds-table-cell">{{ (med.price * med.quantities).toFixed(2) }}</view>
							</view>

							<!--相关操作-->
							<view class="inModal-actions">
								<button class="dispend-btn"
									@click="distributeDrugs(currentPrescription.id)">发药</button>
								<button class="withdraw-btn"
									@click="withdrawDrugs(currentPrescription.id)">退药</button>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 原始数据列表
				dataList: [
				],
				// 搜索关键词
				searchKey: '',
				// 搜索字段选择
				searchFields: ['处方ID', '医生ID', '病人ID'],
				// 当前搜索字段
				searchField: '处方ID',
				// 过滤后的数据列表
				filteredData: [],
				// 分页参数
				pageSize: 5, // 每页显示的数据量
				currentPage: 1, // 当前页码
				//模态框
				showModal: false,
				currentMedication: [],
				currentPrescription: null,
				// 导航栏项
				navItems: [{
						name: '处方管理',
						path: '/pages/Prescription/Prescription'
					},
					{
						name: '药品管理',
						path: '/pages/drugManagement/drugManagement'
					},
					{
						name: '收费管理',
						path: '/pages/Cachier/Cachier'
					},
					{
						name: '退费管理',
						path: '/pages/Cachier/Refund'
					}
				],
				// 当前激活的导航项索引
				activeIndex: 0,
				//链接相关
				baseUrl:"http://172.22.224.1:8080"
			};
		},
		computed: {
			// 计算分页后的数据
			paginatedData() {
				const start = (this.currentPage - 1) * this.pageSize;
				const end = this.currentPage * this.pageSize;
				return this.filteredData.slice(start, end);
			},
			// 计算总页数
			totalPages() {
				return Math.ceil(this.filteredData.length / this.pageSize);
			}
		},
		onLoad() {
			this.fetchData();
		},
		mounted() {
			this.filteredData = this.dataList;
		},
		methods: {
			//获取相应的处方信息
			fetchData() {
				uni.request({
					url: this.baseUrl+'/Prescription/getAllPrescription', // 获取所有处方
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200) {
							console.log(res);
							this.dataList = res.data.items; // 将返回的数据赋值给 dataList
							this.filteredData = res.data.items;
							this.$forceUpdate(); // 强制更新视图
						} else {
							uni.showToast({
								title: '请求失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
						console.error(err);
					}
				});
			},
			//发药
			distributeDrugs(prescriptionId) {
				uni.request({
					url: this.baseUrl+'/Prescription/Distribute', // 发药
					method: 'POST',
					data: {
						prescription_id: prescriptionId
					},
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								title: '发药成功',
								icon: 'success'
							});
							// 更新本地数据状态
							const index = this.dataList.findIndex(item => item.prescriptionId ===
								prescriptionId);
							this.showModal=false;
							this.fetchData();
							if (index !== -1) {
								this.$set(this.dataList[index], 'status', 'completed');
							}
						} else {
							uni.showToast({
								title: '发药失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
						console.error(err);
					}
				});
			},
			//退药并生成退费单
			withdrawDrugs(prescriptionId) {
				uni.request({
					url: this.baseUrl+'/Prescription/withdrawDrugs', // 退药
					method: 'POST',
					data: {
						prescription_id: prescriptionId // 传递处方ID
					},
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								title: '退药成功',
								icon: 'success'
							});
							// 更新本地数据状态
							const index = this.dataList.findIndex(item => item.prescriptionId ===
								prescriptionId);
								this.showModal=false;
								this.fetchData();
							if (index !== -1) {
								this.$set(this.dataList[index], 'status', 'canceled'); // 将状态改为 canceled
							}
						} else {
							uni.showToast({
								title: '退药失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
						console.error(err);
					}
				});
			},
			// 搜索字段改变事件
			onSearchFieldChange(e) {
				this.searchField = this.searchFields[e.detail.value];
			},
			// 搜索数据
			searchData() {
				this.filteredData = this.dataList.filter(item => {
					if (this.searchField === '处方ID') {
						return String(item.id).includes(this.searchKey);
					} else if (this.searchField === '医生ID') {
						return String(item.doctorId).includes(this.searchKey);
					} else if (this.searchField === '病人ID') {
						return String(item.patientId).includes(this.searchKey);
					}
				});
				this.currentPage = 1; // 重置到第一页
			},
			// 查看详情
			viewDetails(item) {
				this.currentPrescription = item;
				this.currentMedication = item.medsList;
				this.showModal = true;
				console.log(this.currentPrescription);
			},
			// 删除数据项
			deleteItem(index) {
				this.filteredData.splice(index, 1);
				// 更新分页
				this.currentPage = Math.min(this.currentPage, this.totalPages);
			},
			// 上一页
			prevPage() {
				if (this.currentPage > 1) this.currentPage--;
			},
			// 下一页
			nextPage() {
				if (this.currentPage < this.totalPages) this.currentPage++;
			},

			closeModal() {
				this.showModal = false;
			},

			// 处理导航项点击事件
			handleNavClick(index, path) {
				this.activeIndex = index;
				// 跳转到对应页面
				uni.redirectTo({
					url: path
				});
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		height: 100vh;
	}

	.sidebar {
		width: 200px;
		background-color: #f0f0f0;
		padding: 20px;
	}

	.nav-item {
		padding: 10px;
		margin-bottom: 10px;
		cursor: pointer;
		border-radius: 5px;
		transition: background-color 0.3s;
	}

	.nav-item.active {
		background-color: #007aff;
		color: white;
	}

	.nav-item:hover {
		background-color: #e0e0e0;
	}

	.content {
		flex: 1;
		padding: 20px;
		background-color: #fff;
	}

	.search-box {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		background-color: #f7f7f7;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.picker-input,
	.search-input {
		border: 4px solid #ddd;
		padding: 8px 10px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.search-input {
		flex-grow: 1;
		  border: 3px solid #00B4CC;
		  height: 20px;
		  border-radius: 5px 0 0 5px;
		  outline: none;
		  color: #9DBFAF;
	}

	.search-btn {
		background-color: #007aff;
		color: white;
		border: none;
		padding: 8px 15px;
		border-radius: 4px;
		cursor: pointer;
	}

	.search-btn:hover {
		background-color: #0056b3;
	}

	.data-table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 20px;
		border: 2px solid #4CAF50;
	}

	.table-row {
		display: flex;
		align-items: center;
	}

	.table-header {
		background-color: #4CAF50;
		color: white;
	}

	.table-cell {
		flex: 1;
		padding: 10px;
		border: 1px solid #ddd;
		text-align: center;
	}

	.table-cell:first-child {
		border-left: none;
	}

	.table-cell:last-child {
		border-right: none;
	}

	.table-row:nth-child(even) {
		background-color: #f9f9f9;
	}

	.actions {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	button {
		padding: 5px 10px;
		border: none;
		border-radius: 5px;
	}

	.view-details-btn {
		background-color: #4CAF50;
		color: white;
	}



	.view-details-btn:hover {
		background-color: #2EE59D;
		-webkit-box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
		box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
		color: #fff;
		-webkit-transform: translateY(-7px);
		-ms-transform: translateY(-7px);
		transform: translateY(-7px);
	}

	button:active {
		-webkit-transform: translateY(-1px);
		-ms-transform: translateY(-1px);
		transform: translateY(-1px);
	}

	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	.pagination-btn {
		margin: 0 5px;
		padding: 5px 10px;
		border: 1px solid #4CAF50;
		border-radius: 4px;
		background-color: #4CAF50;
		color: white;
		cursor: pointer;
	}

	.pagination-btn:disabled {
		background-color: #ddd;
		color: #666;
		cursor: not-allowed;
	}

	.pagination-info {
		margin: 0 10px;
		color: #4CAF50;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal {
		background-color: white;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		width: 90%;
		max-width: 600px;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		background-color: #f8f8f8;
		border-bottom: 1px solid #e6e6e6;
	}

	.close-btn {
		background: none;
		border: none;
		font-size: 24px;
		cursor: pointer;
		color: red;
		margin-top: 0%;
		margin-right: 0%;
	}

	.close-btn:hover {
		color: darkred;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
	}

	.meds-table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
	}

	.meds-table-row {
		display: flex;
	}

	.meds-table-header {
		background-color: #f0f0f0;
		font-weight: bold;
	}

	.meds-table-cell {
		flex: 1;
		padding: 10px;
		border: 1px solid #ddd;
		text-align: center;
	}

	.inModal-actions {
		display: flex;
	}

	.dispend-btn {
		background-color: rgb(21, 194, 108);
		border: 1px solid rgb(21, 194, 108);
		padding: 12px 20px;
		border-radius: 7px;
		transition: .3s;
		color: #fff;
	}

	.dispend-btn:hover {
		background-color: rgb(27, 255, 141);
		-webkit-box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
		box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
		color: #fff;
		-webkit-transform: translateY(-7px);
		-ms-transform: translateY(-7px);
		transform: translateY(-7px);
	}


	.withdraw-btn {
		background-color: rgb(244, 185, 83);
		border: 1px solid rgb(244, 185, 83));
		padding: 12px 20px;
		border-radius: 7px;
		transition: .3s;
		color: #fff;

	}

	.withdraw-btn:hover {
		background-color: #e6e600;
		-webkit-box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
		box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
		color: #fff;
		-webkit-transform: translateY(-7px);
		-ms-transform: translateY(-7px);
		transform: translateY(-7px);
	}
</style>